<template>
  <div>
    <div class="title">
      修改密码
    </div>

    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="username" type="password" name="password" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" style="margin-top: 20rem;height: 70rem;line-height: 60rem;"/>
        <van-field v-model="password" type="password" name="confirmPassword" label="请确定密码" placeholder="请确定密码"
          :rules="[{ required: true, message: '请确定密码' }]"   style="height: 70rem;line-height: 60rem;"/>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit" color="#ff5777">
          确定
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useUserStore } from '@/stores/user'; // 导入 Pinia store
import { Toast } from 'vant';

const username = ref('');
const password = ref('');

const userStore = useUserStore(); // 获取 Pinia store
const phone = ref(userStore.getPhone()); // 从 Pinia store 中获取手机号

const users = ref(JSON.parse(localStorage.getItem("users")) || []);

const onSubmit = () => {
  if (username.value !== password.value) {
    Toast('两次输入的密码不一致');
    return;
  }
  const user = users.value.find((user) => user.phone === phone.value);
  if (user) {
    user.password = username.value; // 更新密码
    localStorage.setItem("users", JSON.stringify(users.value)); // 保存到 localStorage
    Toast('密码修改成功');
  } else {
    Toast('手机号未注册');
  }
};
</script>

<style scoped>
.title {
  width: 100%;
  height: 44rem;
  text-align: center;
  margin: 0 0 15rem 0;
  font-size: 20rem;
  line-height: 44rem;
  border-bottom: 1rem solid #d1cdcd;
  color: #999;
}
</style>
